<template>
	<div class="app-container">
		<!-- 搜索表单 -->
		<el-form ref="queryFormRef" :model="queryParams" :inline="true">
			<el-form-item><el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button></el-form-item>
			<el-form-item prop="method"><el-input v-model="queryParams.Method" placeholder="请求方法" clearable @keyup.enter="handleQuery" /></el-form-item>
			<!--<el-form-item prop="enable">
				<el-select v-model="queryParams.Enable" placeholder="部门状态" clearable>
					<el-option :value="true" label="启用" />
					<el-option :value="false" label="禁用" />
				</el-select>
			</el-form-item>-->
			<el-form-item>
				<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
				<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- 数据表格 -->
		<el-table
			ref="dataTableRef"
			v-loading="loading"
			:data="list"
			@sort-change="sortChange"
			@selection-change="handleSelectionChange"
			@row-click="handleRowClick"
			@row-contextmenu="handleRowContextmenu"
			highlight-current-row
			border
			fit
		>
			<el-table-column type="selection" width="37" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column label="ID" width="60" prop="id" sortable="custom" align="center"></el-table-column>
			<el-table-column label="请求方式" prop="method" sortable="custom" align="center" width="110" />
			<el-table-column label="路径" prop="path" align="center" sortable="custom" />
			<el-table-column label="IP地址" prop="ip" align="center" width="150" />
			<el-table-column label="查询参数" prop="queryString" align="center" />
			<el-table-column label="耗时(ms)" prop="time" align="center" width="90" />
			<el-table-column label="访问用户" prop="userName" align="center" width="130" />
			<el-table-column label="状态" prop="enabled" width="63">
				<template #default="scope">
					{{ scope.row.enabled == null ? '未知' : scope.row.enabled ? '启用' : '禁用' }}
				</template>
			</el-table-column>
			<el-table-column label="添加时间" prop="added_time" sortable="custom" align="center" width="110">
				<template #default="scope">
					<el-tooltip effect="dark" :content="scope.row.added_time" placement="top">{{ formatDate(scope.row.added_time) }}</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="150">
				<template #default="scope">
					<!--<el-button type="primary" circle plain @click.stop="handleResourceAssign(scope.row)"><svg-icon icon-class="perm" /></el-button>-->
					<!--<el-button type="primary" :icon="Edit" circle plain @click.stop="handleUpdate(scope.row)" />-->
					<el-button type="danger" :icon="Delete" circle plain @click.stop="handleDelete(scope.row)" />
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页工具条 -->
		<pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
		<!--右键菜单-->
		<context-menu v-model:show="contextmenuoptions.show" :options="contextmenuoptions.optionsComopnent">			
			<context-menu-item label="删除" @click="onContextMenuItemClick('delete')">
				<template #icon>
					<Delete style="width: 1em; height: 1em; margin-right:5px;color:#409EFF" />
				</template>
			</context-menu-item>
			<!--use this to add sperator-->
			<!--
		<context-menu-group label="Menu with child">
			<context-menu-item label="Item1" @click="onMenuItemClick("update")" />
			<context-menu-item label="Item2" @click="onMenuClick(3)" />
			<context-menu-group label="Child with v-for 50">
				<context-menu-item v-for="index of 50" :key="index" :label="'Item3-' + index" @click="onLoopMenuClick(index)" />
			</context-menu-group>
		</context-menu-group>-->
		</context-menu>
	</div>
</template>
<script lang="ts">
export default {
	name: 'Res'
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, nextTick, ComponentInternalInstance, getCurrentInstance } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { firstUpperCase, parseTime } from '@/utils';
//import SvgIcon from '@/components/SvgIcon/index.vue';
import { VisitRecordQueryParam, VisitRecordItem } from '@/types/api/sys/VisitRecord';
import { pageQueryParamObj } from '@/types/constant';
import API from '@/api/sys/VisitRecord';
// 获取全局属性和方法,ctx和proxy都可以访问到定义的全局方法，但是ctx只能在本地使用，线上环境使用proxy
// 解决编译报错https://www.dianjilingqu.com/320268.html
// 添加断言
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const emit = defineEmits(['objClick']);
const queryFormRef = ref(ElForm);
const state = reactive({
	loading: true,
	// 选中ID数组
	ids: [],
	queryParams: Object.assign({}, pageQueryParamObj) as VisitRecordQueryParam,
	list: [] as VisitRecordItem[],
	total: 0, //总记录数
	dialog: {
		title: '',
		visible: false
	},
	contextmenuoptions: {//右键菜单配置
		show: false,
		row:null,//选择的行
		optionsComopnent: {
		      zIndex: 5, minWidth: 330,x: 500,y: 200
		}
	}
});
//暴露给视图template，模板取值不需要前缀state.
const { loading, queryParams, list, total, contextmenuoptions } = toRefs(state);
//执行带参数查询
function handleQuery() {
	emit('objClick', {});
	state.loading = true;
	API.fetchList(state.queryParams).then(({ data }) => {
		state.list = data.items;
		state.total = data.total;
		state.loading = false;
	});
}
//重置查询参数，并重新查询
function resetQuery() {
	state.queryParams = Object.assign({}, pageQueryParamObj);
	//queryFormRef.value.resetFields();
	handleQuery();
}

function handleSelectionChange(selection: any) {
	state.ids = selection.map((item: any) => item.id);
}
//执行行单击事件
function handleRowClick(row: any) {
	emit('objClick', row);
}
//执行行右键菜单事件
function handleRowContextmenu(row: any, column:any, event:any) {
	state.contextmenuoptions.show=true;
	state.contextmenuoptions.row=row;
	let cha = document.body.clientHeight - event.clientY;
	// 防止菜单太靠底，根据可视高度调整菜单出现位置
	if (cha < 150) {
	    state.contextmenuoptions.optionsComopnent.y = event.clientY - 120 ;
	} else {
		state.contextmenuoptions.optionsComopnent.y = event.clientY - 10;
	}
	state.contextmenuoptions.optionsComopnent.x = event.clientX +50;
	 // 阻止右键默认行为
    event.preventDefault();
}
//y右键菜单项单击事件
function onContextMenuItemClick(op:string) {
	var row=state.contextmenuoptions.row;
	if(row==null){ElMessage.success('请选择一行数据');return;}	
	if(op=="delete"){handleDelete(state.contextmenuoptions.row)}
} 
/**
 *  删除
 */
function handleDelete(row: any) {
	const ids = row.id ? [row.id] : state.ids;
	if (ids.length == 0) {
		ElMessage.info('请至少选择一条记录！');
		return;
	}
	ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			API.delete(ids.join(',')).then(() => {
				ElMessage.success('删除成功');
				handleQuery();
			});
		})
		.catch(e => ElMessage.info('已取消删除' + e));
}

function sortChange(data: any) {
	var { prop, order } = data;
	prop = firstUpperCase(prop);
	if (order === 'ascending') {
		state.queryParams.sort = '+' + prop;
	} else {
		state.queryParams.sort = '-' + prop;
	}
	state.queryParams = Object.assign(state.queryParams, pageQueryParamObj); //重置分页，但是查询参数不重置
	handleQuery();
}

function formatDate(val: any) {
	return parseTime(val, '{y}-{m}-{d}');
}
onMounted(() => {
	handleQuery();
});
</script>
<style lang="scss"></style>
